<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面可见性检测</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Arial', sans-serif;
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.6;
    }
    
    h1 {
      text-align: center;
      margin-bottom: 30px;
      color: #333;
    }
    
    .status-container {
      background-color: #f4f4f4;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 30px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .status {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      padding: 15px;
      border-radius: 5px;
      transition: all 0.3s ease;
    }
    
    .visible {
      background-color: #4CAF50;
      color: white;
    }
    
    .hidden {
      background-color: #F44336;
      color: white;
    }
    
    .log-container {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
      border: 1px solid #ddd;
      height: 300px;
      overflow-y: auto;
    }
    
    .log-entry {
      padding: 8px;
      border-bottom: 1px solid #eee;
    }
    
    .instructions {
      margin: 30px 0;
      padding: 15px;
      background-color: #fffde7;
      border-left: 4px solid #ffd600;
    }
  </style>
</head>
<body>
  <h1>页面可见性检测</h1>
  
  <div class="instructions">
    <p>测试方法：</p>
    <ul>
      <li>切换到其他标签页或应用程序</li>
      <li>最小化浏览器窗口</li>
      <li>将浏览器移到其他桌面（如使用多桌面系统）</li>
    </ul>
    <p>状态将会实时更新，并记录在下方日志中。</p>
  </div>
  
  <div class="status-container">
    <h2>当前状态：</h2>
    <div id="statusDisplay" class="status visible">页面可见</div>
  </div>
  
  <h2>状态变化日志：</h2>
  <div id="logContainer" class="log-container"></div>
  
  <script>
    // 获取DOM元素
    const statusDisplay = document.getElementById('statusDisplay');
    const logContainer = document.getElementById('logContainer');
    
    // 添加日志条目的函数
    function addLogEntry(message) {
      const now = new Date();
      const timeString = now.toLocaleTimeString();
      const logEntry = document.createElement('div');
      logEntry.className = 'log-entry';
      logEntry.textContent = `${timeString}: ${message}`;
      logContainer.prepend(logEntry); // 将最新的日志放在顶部
    }
    
    // 更新状态显示
    function updateStatus(isVisible) {
      if (isVisible) {
        statusDisplay.textContent = '页面可见';
        statusDisplay.className = 'status visible';
        addLogEntry('页面变为可见状态');
      } else {
        statusDisplay.textContent = '页面隐藏';
        statusDisplay.className = 'status hidden';
        addLogEntry('页面变为隐藏状态');
      }
    }
    
    // 初始状态记录
    addLogEntry('页面加载完成，当前可见');
    
    // 方法1：使用 Page Visibility API
    document.addEventListener('visibilitychange', () => {
      const isVisible = document.visibilityState === 'visible';
      updateStatus(isVisible);
      addLogEntry(`visibilityState 变化为: ${document.visibilityState}`);
    });
    
    // 方法2：使用 blur 和 focus 事件（辅助检测）
    window.addEventListener('blur', () => {
      addLogEntry('窗口失去焦点 (blur 事件)');
    });
    
    window.addEventListener('focus', () => {
      addLogEntry('窗口获得焦点 (focus 事件)');
    });
    
    // 方法3：使用 beforeunload 事件（检测页面即将关闭）
    window.addEventListener('beforeunload', () => {
      addLogEntry('页面即将关闭或刷新');
    });
    
    // 方法4：使用 online 和 offline 事件（检测网络状态）
    window.addEventListener('online', () => {
      addLogEntry('网络连接恢复');
    });
    
    window.addEventListener('offline', () => {
      addLogEntry('网络连接断开');
    });
  </script>
</body>
</html>